﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Order.aspx.cs" Inherits="Order_Order" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Layout</title>
        <link rel="stylesheet" href="../Styles/jquery.mobile-1.0.1.css" />
	    <link rel="stylesheet" href="../Styles/jqm-docs.css" />
	    
        <script type="text/javascript" src="../Scripts/jquery.js"></script>
	    <script type="text/javascript" src="../Scripts/jquery.mobile-1.0.1.min.js"></script>

	    <script type="text/javascript" src="../Scripts/jquery.mobile.themeswitcher.js"></script>
	    <script type="text/javascript" src="../Scripts/jqm-docs.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // when the tag with id="btn" is clicked
            $('a').click(function () {
                alert($(this).attr('id'));
                alert($(this).data('id'));

                //alert("HELLO");
                // gets the content of "#div1", with html(), and text()
                /*var dv_html = $('#div1').html();
                var dv_text = $('#div1').text();

                // displays the values in an alert window
                alert('html - ' + dv_html + '\n text - ' + dv_text);

                // modify the content in "#div1" and "#div2"
                $('#div1').html('New content, changed with <u>html()</u>');
                $('#div2').text('New content, modified with <u>text()</u>');*/

                /*$('#div1').append('<div data-role="fieldcontain" class="ui-hide-label">' +
'<label for="name" class="ui-hidden-accessible">Name:</label>' +
'<input type="text" name="name" size="25" id="name" placeholder="Name"/>' +
'</div>'); */

                $('#div1').append("<div class='ui-block-a'><div class='ui-bar ui-bar-e' style='border-color:Black;'>" +
                    $(this).data('id')
                 + "<a href='#' class='ui-btn ui-btn-icon-notext ui-btn-corner-all ui-shadow ui-btn--up-b' data-role='button' data-icon='delete' data-iconpos='notext' data-theme='b'><span class='ui-btn-inner ui-btn-coner-all'><span class='ui-btn-text'>Back Home</span><span class='ui-icon ui-icon-delete ui-icon-shadow'></span></span></a></div> </div>");

            });
        });
    </script>

</head>
<body>
    <form id="form1" runat="server" data-ajax="false">
    <div data-role="page">
        <div data-role="header">
        <h1>
                The Layout</h1>
                 <a href="../Default.aspx" data-role="button" data-icon="arrow-l" data-theme="b">Back Home</a>
        </div>
        <div data-role="content" data-theme="c">
            <div class="content-secondary">
                    

                <div id="div1" class="ui-grid-a" style="border-width:2px;">
                    
                    <div class="ui-block-a">
                        <div class="ui-bar ui-bar-e" style="border-color:Black;">
                            Block A
                        <a href="#" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="b">Back Home</a>
                        </div>
                    </div>

                    <div class="ui-block-b">
                        <div class="ui-bar ui-bar-e" style="border-color:Black;">
                            Block C
                            <a href="../Default.aspx" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="b">Back Home</a>
                        </div>
                    </div>

                    <div class="ui-block-a">
                        <div id="div2" class="ui-bar ui-bar-e" style="border-color:Black;">
                            Block A
                        <a href="#" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="b">Back Home</a>
                        </div>
                    </div>

                    <div class="ui-block-b">
                        <div class="ui-bar ui-bar-e" style="border-color:Black;">
                            Block C
                            <a href="../Default.aspx" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="b">Back Home</a>
                        </div>
                    </div>

                </div>


                <fieldset class="ui-grid-a">
                    <div class="ui-block-a">
                        <input type="button" id="myFormSubmit" value="Submit" data-theme="b" onclick="alert('The Submit Button has been clicked');" />
                    </div>
                    <div class="ui-block-b">
                        <input type="reset" id="myFormReset" value="Reset" data-theme="c" />
                    </div>
                </fieldset>

            </div>
            <div class="content-primary">
                <asp:Label runat="server" ID="HelloWorldLabel"></asp:Label>
                <br />
                <br />
                <br />
                <ul data-role="listview" data-filter="true" data-filter-placeholder="Search ticker or firm name..." data-inset="true">
                    <asp:Repeater ID="rpt1" runat="server">
                        <ItemTemplate>
                            <li data-filtertext='<%#DataBinder.Eval(Container.DataItem, "item_name")%>'>
                            <a href="" id='<%#DataBinder.Eval(Container.DataItem, "item_id")%>' data-id='<%#DataBinder.Eval(Container.DataItem, "item_name")%>'>
                                <%#DataBinder.Eval(Container.DataItem, "item_name")%></a>
                                <%--   <input type="checkbox" name='<%#DataBinder.Eval(Container.DataItem, "item_name")%>' id='<%##DataBinder.Eval(Container.DataItem, "item_id")%>'
                            class="custom" />
                        <label for='<%#DataBinder.Eval(Container.DataItem, "item_name")%>'>
                            Cheetos</label>--%>
                            </li>
                        </ItemTemplate>
                    </asp:Repeater>
                </ul>
            </div>
        </div>
        <div data-role="footer">
        </div>
    </div>
    </form>
</body>
</html>
